<template>
  <el-dialog v-model="drawer"
             @close="closeEvent"
             width="660px">
    <template #header="{ close, titleId, titleClass }">
      <el-row>
        <el-col :span="7">
          <h4 style="line-height: 32px;" :id="titleId" :class="titleClass">{{ title }}</h4>
        </el-col>
        <el-col :span="13">
          <el-input v-model.trim="search" :clearable="true" placeholder="通过搜索名称" size="mini">
            <template #append>
              <el-button type="success" size="mini" @click="loadTableData">搜索</el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </template>
    <el-table :data="state.tableData" stripe style="width: 100%" v-loading="tableLoading" size="small">
      <el-table-column prop="nickname" label="姓名"/>
      <el-table-column prop="phone" label="手机号"/>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button type="primary" size="small" @click="onSelectEvent(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="page__body">
        <el-pagination
            v-model:page-size="state.size"
            v-model:current-page="state.current"
            v-model:total="state.total"
            layout="prev, pager, next"
            @size-change="loadTableData"
            @current-change="loadTableData"
        />
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, toRefs, watch, computed, reactive} from 'vue'
import {getUserPage} from '/@/api/sys/user'

/** 此处引入，支持多个 */
const emit = defineEmits(['update:dialogPop', 'customerType'])
/** 定义组件入参 */
const props = defineProps({
  dialogPop: Boolean, // 控制显示隐藏
  title: {
    type: String,
    default: '请选择绑定信息'
  }
})
const {dialogPop, title} = toRefs(props)
/** 双向绑定 */
let drawer: any = computed({
  get: () => dialogPop.value,
  set: (val) => emit('update:dialogPop', val)
})
/** 关闭弹窗 */
const closeEvent = () => drawer = false
// 状态数据
const state = reactive({
  size: 10,// 页容
  current: 1,// 当前页
  total: 0,// 记录条数据
  tableData: [],// 表格数据
})
// 搜索数据
const search = ref<string>('')
// 表格加载显示
const tableLoading = ref<boolean>(false)
// 点击选中某个
const onSelectEvent = (obj: any) => {
  emit('customerType', obj)
  emit('update:dialogPop', false)
}
// 加载表格数据
const loadTableData = () => {
  tableLoading.value = true
  try {
    const params: any = {current: state.current, size: state.size}
    if (search.value && search.value != "") {
      params['name'] = search.value
    }
    getUserPage(params).then((res: any) => {
      state.total = res.data.total
      state.tableData = res.data.records
    })
  } catch (e: any) {
    console.log(e)
  }
  tableLoading.value = false
}

/** 监听打开就加载 */
watch(() => dialogPop.value, (val: any) => {
  if (val) {
    reset()
    loadTableData()
  }
})
// 重置数据
const reset = () => {
  state.current = 1
  state.size = 10
  state.total = 0
  state.tableData = []
  search.value = ''
}
</script>

<style scoped lang="scss">

.page__body {
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>


